<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关联用户</title>
<link rel="stylesheet" href="${basePath}/admin/layui/css/layui.css">
<link rel="stylesheet" href="${basePath}/admin/css/admin.css">
<script type="text/javascript">
			window.token = '${sessionScope.token}';
		</script>
</head>
<body>
	<div id="employeesDiv" class="layui-form">
		<div class="layui-inline">
			<label  class="layui-form-label">工号/姓名</label>
			<div class="layui-input-inline" style="width:150px;line-height:30px;">
				<input type="text" id="empNameOrCode" name="empNameOrCode" placeholder="请输入工号/姓名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label style="width:40px;" class="layui-form-label">手机</label>
			<div class="layui-input-inline" style="width:130px;line-height:30px;">
				<input type="text" id="phone" name="phone" placeholder="请输入手机号码"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<button id="submitBtn" class="layui-btn layuiadmin-btn-list" lay-submit=""
				lay-filter="search">
				<i class="layui-icon layui-icon-search"></i>
			</button>
		</div>
		<table class="layui-hide" id="employeesTable"
			lay-filter="employeesTable"></table>
	</div>

</body>
<script src="${basePath}/admin/layui/layui.all.js"></script>
<script src="${basePath}/admin/js/plugin/jquery-2.2.4.min.js"></script>
<script src="${basePath}/admin/js/plugin/template-web.js"></script>
<script src="${basePath}/admin/js/mylayui.js"></script>
<script type="text/javascript">

$(function(){
	
	window.basePath = '${basePath}';
	console.log(window.basePath);
	var roleId = $(parent.document.getElementById("roleId")).val();
	var table = layui.table;
	var form = layui.form;
	form.on('submit(search)', function(data){
		loadTable(table,roleId);
	});
	loadTable(table,roleId);
	table.on('tool(employeesTable)', function(obj) {
		var data = obj.data; //获得当前行数据
		var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		var tr = obj.tr; //获得当前行 tr 的DOM对象
		if (layEvent === 'unbind') {
			parent.parent.layer.confirm('您确定要解除绑定吗？', function(index) {
				parent.parent.layer.close(index);
				//向服务端发送删除指令
				$.ajax({
					  url:window.basePath+ '/sys/unBindEmployeeRole',
					  dataType:'json',
						type: "post",
						headers: {"token" : window.token},
					  data:{
						  roleId:roleId,
						  empId:data.EmpCode
					  },
					  success:function(data){
						  if(data){
                              obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							  layer.msg(data.message);
						  }
						  loadTable(table,roleId);
						//刷新左边iframe数据
						parent.frames["iframeLeft"].location.reload(true);
					  }
				  });
			});
		}else if (layEvent === 'user') {
			var id = obj.data.id;
			openUsersView(id);
		}
	})
});

function loadTable(table,roleId){
	var empNameOrCode = $.trim($("#empNameOrCode").val());
	var phone = $.trim($("#phone").val());
	var tableIns = table.render({
		elem : '#employeesTable',
		url : window.basePath+ '/sys/getEmployeesList',
		headers: {"token" : window.token},
		method: "post",
		where:{empNameOrCode:empNameOrCode,phone:phone,roleId:roleId},
		height : 360,
		cols : [ [{
			type:'numbers',
			title : '序号',
			width : 70
		},{
			field : 'EmpName',
			width : 100,
			align : 'center',
			title : '姓名'
		}, {
			field : 'EmpCode',
			width : 80,
			align : 'center',
			title : '工号'
		}, {
			field : 'Position',
			width : 140,
			align : 'center',
			title : '职位'
		}, {
			field : 'Phone',
			width : 130,
			align : 'center',
			title : '手机号码'
		},{
			fixed: 'right',
			width:100, 
			align:'center', 
			title:'操作',
			toolbar: '#operationBar'
		} ] ],
		text : {
			none : '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
		},
		page : false,
		done: function(res, curr, count){
		}
	});
}
</script>
<script type="text/html" id="operationBar">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="unbind">解除绑定</a>
</script>
</html>